<template>
	<view>
		
		<view class="dis-flex flex-center pos-fix wd100" style="height: 260rpx;left: 0;">
			<u-image src="/static/images/jifen.png" width="100" height="100"/>
			<view class="fs18 c-333 fwb">总积分：{{userInfo.score}}</view>
		</view>
		
		
		<mescroll-body ref="mescrollRef" top="260" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="detail-card bg-fff dis-flex flex-center px15 mb10" v-for="(item, index) in pageList" :key="index">
				<view class="flex">
					<view class="c-000 fs14 breakall">{{item.memo}}</view>
					<view class="fs12 c-999 mt5">{{$u.timeFormat(item.createtime, 'yyyy-mm-dd')}}</view>
				</view>
				<view :class="item.before < item.after?'c-common':'c-red'" class="fwb fs14"> 
					<text>{{(item.before < item.after?'+':'-')}}</text>
					<text>{{item.score}}</text>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: {
			...mapState(['userInfo'])
		},
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		data() {
			return {
				navBackground:{backgroundImage:'linear-gradient(90deg, #1EA9FA, #0285CF)'},
				detailInfo:{},
				availableBalance:0,
				pageList:[],
			}
		},
		onLoad() {
			getApp().loadUserInfo();
		},
		methods: {
			downCallback(){
				setTimeout(() => {
					this.pageList = [];
					this.mescroll.resetUpScroll();
				},1000);
			},
			upCallback(page) {
				this.$http.post(this.$config.UrlGetMyScore, {
					page: page.num,
				}, {
					log: true,
					header: {
						'content-type': 'application/json'
					}
				}).then((res) => {
					let datalist = res?.data?.data || []
					if (page.num == 1) this.pageList = [];
					this.pageList.push.apply(this.pageList, datalist);
					this.mescroll.endBySize(datalist.length, res?.data?.total);
				}).catch((err) => {
					this.mescroll.endErr();
				})
			},
			
		}
	}
</script>

<style>
	.detail-card{
		margin:0 30rpx;border-radius: 20rpx;overflow: hidden;
		padding-top: 28rpx;padding-bottom: 28rpx;
	}
</style>
